/**
 * Created by Administrator on 2018/11/13.
 */
var myRate1 = 1000;
option = {
  backgroundColor: 'transparent',
  title: [
    {
      x: "10%",
      bottom: 20,
      text: '本周使用人数',
      textStyle: {
        fontWeight: 'bold',
        fontSize: 16,
        color: "#5ff9ff"
      }
    },
    {
      x: "42%",
      bottom: 20,
      text: '累计使用人次',
      textStyle: {
        fontWeight: 'bold',
        fontSize: 16,
        color: "#5ff9ff"
      }
    },
    {
      x: "75%",
      bottom: 20,
      text: '今日使用人次',
      textStyle: {
        fontWeight: 'bold',
        fontSize: 16,
        color: "#5ff9ff"
      }
    }
  ],
  tooltip: {
    show: true
  },
  series: [
    {
      type: 'gauge',
      center: ['50%', '55%'], // 默认全局居中
      radius: '50%',
      splitNumber: 10, //刻度数量
      min: 0,
      max: 1000,
      startAngle: 200,
      endAngle: -20,
      clockwise: true,
      axisLine: {
        show: true,
        lineStyle: {
          width: 2,
          shadowBlur: 0,
          color: [
            [1, '#03B7C9']
          ]
        }
      },
      axisTick: {
        show: true,
        lineStyle: {
          color: '#03B7C9',
          width: 1
        },
        length: -15,
        splitNumber: 10
      },
      splitLine: {
        show: true,
        length: -20,
        lineStyle: {
          color: '#03B7C9',
        }
      },
      axisLabel: {
        distance: -20,
        textStyle: {
          color: "#03B7C9",
          fontSize: "14",
          fontWeight: "bold"
        }
      },
      pointer: { //仪表盘指针
        show: 0
      },
      detail: {
        show: false
      },
      data: [{
        name: "",
        value: myRate1
      }]
    },
    {
      startAngle: 200,
      endAngle: -20,
      type: 'gauge',
      center: ['50%', '55%'], // 默认全局居中
      radius: '45%',
      min: 0,
      max: 100,
      splitNumber: 0,
      axisLine: { // 坐标轴线
        lineStyle: {
          color: [
            [0.66, '#dddddd'],
            [1, '#dddddd']
          ], // 属性lineStyle控制线条样式
          width: 4
        }
      },
      axisLabel: { // 坐标轴小标记
        textStyle: { // 属性lineStyle控制线条样式
          fontWeight: 'bolder',
          fontSize: 16,
          color: 'rgba(30,144,255,0)',
        }
      },
      splitLine: { // 分隔线
        length: 10, // 属性length控制线长
        lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
          width: 0,
          color: '#444'
        }
      },
      pointer: { // 分隔线 指针
        color: '#666666',
        width: 0,
        length: 230
      },
      detail: {
        show: false
      },
    },
    {
      name: '累计使用人次',
      type: 'gauge',
      startAngle: 200,
      endAngle: -20,
      radius: '40%',
      center: ['50%', '55%'], // 默认全局居中
      min: 0,
      max: 1000,
      axisLine: {
        show: false,
        lineStyle: {
          width: 25,
          shadowBlur: 0,
          color: [
            [0.2, '#00FAFC'],
            [0.4, '#3BD542'],
            [0.6, '#E3F424'],
            [0.8, '#7E48DA'],
            [1, '#E531A8']
          ]
        }
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
        length: 20,
      },
      axisLabel: {
        show: false
      },
      pointer: {
        show: true,
      },
      detail: {
        show: true,
        offsetCenter: [0, '70%'],
        textStyle: {
          fontSize: 16
        }
      },
      itemStyle: {
        normal: {
          color: "#03B7C9",

        }
      },
      data: [{
        value: 436
      }]
    },
    {
      type: 'gauge',
      center: ['20%', '55%'], // 默认全局居中
      radius: '35%',
      splitNumber: 5, //刻度数量
      min: 0,
      max: 1000,
      endAngle: 45,
      clockwise: true,
      axisLine: {
        show: true,
        lineStyle: {
          width: 2,
          shadowBlur: 0,
          color: [
            [1, '#03B7C9']
          ]
        }
      },
      axisTick: {
        show: true,
        lineStyle: {
          color: '#03B7C9',
          width: 1
        },
        length: -15,
        splitNumber: 10
      },
      splitLine: {
        show: true,
        length: -20,
        lineStyle: {
          color: '#03B7C9',
        }
      },
      axisLabel: {
        distance: -20,
        textStyle: {
          color: "#03B7C9",
          fontSize: "14",
          fontWeight: "bold"
        }
      },
      pointer: { //仪表盘指针
        show: 0
      },
      detail: {
        show: false
      },
      data: [{
        name: "",
        value: myRate1
      }]
    },
    {
      type: 'gauge',
      center: ['20%', '55%'], // 默认全局居中
      radius: '30%',
      min: 0,
      max: 1000,
      endAngle: 45,
      splitNumber: 0,
      axisLine: { // 坐标轴线
        lineStyle: {
          color: [
            [0.66, '#dddddd'],
            [1, '#dddddd']
          ], // 属性lineStyle控制线条样式
          width: 4
        }
      },


      axisLabel: { // 坐标轴小标记
        textStyle: { // 属性lineStyle控制线条样式
          fontWeight: 'bolder',
          fontSize: 16,
          color: 'rgba(30,144,255,0)',
        }
      },
      splitLine: { // 分隔线
        length: 10, // 属性length控制线长
        lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
          width: 0,
          color: '#444'
        }
      },
      pointer: { // 分隔线 指针
        color: '#666666',
        width: 0,
        length: 230
      },
      detail: {
        show: false
      },

    },
    {
      name: '本周使用人数',
      type: 'gauge',
      endAngle: 45,
      radius: '25%',
      center: ['20%', '55%'], // 默认全局居中
      min: 0,
      max: 1000,
      axisLine: {
        show: false,
        lineStyle: {
          width: 25,
          shadowBlur: 0,
          color: [
            [0.2, '#00FAFC'],
            [0.4, '#3BD542'],
            [0.6, '#E3F424'],
            [0.8, '#7E48DA'],
            [1, '#E531A8']
          ]
        }
      },
      axisTick: {
        show: false,

      },
      splitLine: {
        show: false,
        length: 20,

      },

      axisLabel: {
        show: false
      },
      pointer: {
        show: true,
      },
      detail: {
        show: true,
        offsetCenter: [5, '85%'],
        textStyle: {
          fontSize: 16
        }
      },
      itemStyle: {
        normal: {
          color: "#03B7C9"
        }
      },
      data: [{
        value: 245
      }]
    },
    {
      type: 'gauge',
      center: ['80%', '55%'], // 默认全局居中
      radius: '35%',
      splitNumber: 5, //刻度数量
      min: 0,
      max: 1000,
      startAngle: 140,
      endAngle: -45,
      clockwise: true,
      axisLine: {
        show: true,
        lineStyle: {
          width: 2,
          shadowBlur: 0,
          color: [
            [1, '#03B7C9']
          ]
        }
      },
      axisTick: {
        show: true,
        lineStyle: {
          color: '#03B7C9',
          width: 1
        },
        length: -15,
        splitNumber: 10
      },
      splitLine: {
        show: true,
        length: -20,
        lineStyle: {
          color: '#03B7C9',
        }
      },
      axisLabel: {
        distance: -20,
        textStyle: {
          color: "#03B7C9",
          fontSize: "15",
          fontWeight: "bold"
        }
      },
      pointer: { //仪表盘指针
        show: 0
      },
      detail: {
        show: false
      },
      data: [{
        name: "",
        value: myRate1
      }]
    },
    {
      type: 'gauge',
      center: ['80%', '55%'], // 默认全局居中
      radius: '30%',
      min: 0,
      max: 1000,
      startAngle: 140,
      endAngle: -45,
      splitNumber: 0,
      axisLine: { // 坐标轴线
        lineStyle: {
          color: [
            [0.66, '#dddddd'],
            [1, '#dddddd']
          ], // 属性lineStyle控制线条样式
          width: 4
        }
      },


      axisLabel: { // 坐标轴小标记
        textStyle: { // 属性lineStyle控制线条样式
          fontWeight: 'bolder',
          fontSize: 16,
          color: 'rgba(30,144,255,0)',
        }
      },
      splitLine: { // 分隔线
        length: 10, // 属性length控制线长
        lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
          width: 0,
          color: '#444'
        }
      },
      pointer: { // 分隔线 指针
        color: '#666666',
        width: 0,
        length: 230
      },
      detail: {
        show: false
      },

    },
    {
      name: '今日使用人次',
      type: 'gauge',
      startAngle: 140,
      endAngle: -45,
      radius: '25%',
      center: ['80%', '55%'], // 默认全局居中
      min: 0,
      max: 1000,
      axisLine: {
        show: false,
        lineStyle: {
          width: 25,
          shadowBlur: 0,
          color: [
            [0.2, '#00FAFC'],
            [0.4, '#3BD542'],
            [0.6, '#E3F424'],
            [0.8, '#7E48DA'],
            [1, '#E531A8']
          ]
        }
      },
      axisTick: {
        show: false,

      },
      splitLine: {
        show: false,
        length: 20,

      },

      axisLabel: {
        show: false
      },
      pointer: {
        show: true,
      },
      detail: {
        show: true,
        offsetCenter: [-5, '85%'],
        textStyle: {
          fontSize: 16
        }
      },
      itemStyle: {
        normal: {
          color: "#03B7C9",
        }
      },
      data: [{
        value: 135
      }]
    }
  ]
};
var echartList7 = echarts.init(document.getElementById('echartListCount'))
echartList7.setOption(option);